<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="utf-8">

		<title>09CSS넘침및배치</title>
	</head>

	<body>
		<h1>CSS넘침 및 배치</h1>
		<h2>내용 넘침 : overflow</h2>
		<p>
			요소의 박스내 내용을 제어하는 방식에 대한
		</p>
		<p>
			visible : 박스 밖 넘쳐나는 내용은 남겨둠
		</p>
		<p>
			hidden : 박스 밖 넘쳐나는 내용은 잘라냄
		</p>
		<p>
			scroll : 박스 밖 넘쳐나는 내용은 잘라지지만 스크롤로 바로 볼수 있게함
		</p>
		<p>
			auto : 박스 내용이 밖으로 넘쳐나는 경우 스크롤바로 볼수 있게 함.
		</p>

		<div style="width: 250px; height: 150px; border: 1px solid red; overflow: hidden;">
			<p>
				시간은 금이라구,친구!!
			</p>
			<p>
				시간은 금이라구,친구!!
			</p>
			<p>
				시간은 금이라구,친구!!
			</p>
			<p>
				시간은 금이라구,친구!!
			</p>
			<p>
				시간은 금이라구,친구!!
			</p>
			<p>
				시간은 금이라구,친구!!
			</p>
			<p>
				시간은 금이라구,친구!!
			</p>
			<p>
				시간은 금이라구,친구!!
			</p>
			<p>
				시간은 금이라구,친구!!
			</p>
			<p>
				시간은 금이라구,친구!!
			</p>
			<p>
				시간은 금이라구,친구!!
			</p>
			<p>
				시간은 금이라구,친구!!
			</p>
			<p>
				시간은 금이라구,친구!!
			</p>

		</div>

		<div style="width: 250px; height: 150px; border :1px solid navy; overflow: scroll;">
			<p>
				시간은 금이라구,친구!!
			</p>
			<p>
				시간은 금이라구,친구!!
			</p>
			<p>
				시간은 금이라구,친구!!
			</p>
			<p>
				시간은 금이라구,친구!!
			</p>
			<p>
				시간은 금이라구,친구!!
			</p>
			<p>
				시간은 금이라구,친구!!
			</p>
			<p>
				시간은 금이라구,친구!!
			</p>
			<p>
				시간은 금이라구,친구!!
			</p>
			<p>
				시간은 금이라구,친구!!
			</p>
			<p>
				시간은 금이라구,친구!!
			</p>
			<p>
				시간은 금이라구,친구!!
			</p>
			<p>
				시간은 금이라구,친구!!
			</p>
			<p>
				시간은 금이라구,친구!!
			</p>
			<p>
				시간은 금이라구,친구!!
			</p>
			<p>
				시간은 금이라구,친구!!
			</p>
			<p>
				시간은 금이라구,친구!!
			</p>
		</div>

		<div style="width: 250px; height: 150px; border :1px solid navy; overflow: auto;" >
			<p>
				시간은 금이라구,친구!!
			</p>
			<p>
				시간은 금이라구,친구!!
			</p>
			<p>
				시간은 금이라구,친구!!
			</p>
			<p>
				시간은 금이라구,친구!!
			</p>
			<p>
				시간은 금이라구,친구!!
			</p>
			<p>
				시간은 금이라구,친구!!
			</p>
			<p>
				시간은 금이라구,친구!!
			</p>
			<p>
				시간은 금이라구,친구!!
			</p>
			<p>
				시간은 금이라구,친구!!
			</p>
			<p>
				시간은 금이라구,친구!!
			</p>
			<p>
				시간은 금이라구,친구!!
			</p>
			<p>
				시간은 금이라구,친구!!
			</p>
			<p>
				시간은 금이라구,친구!!
			</p>
			<p>
				시간은 금이라구,친구!!
			</p>
			<p>
				시간은 금이라구,친구!!
			</p>
		</div>

		<hr />
		<h2>요소의 수평배치 : float</h2>
		<p>
			요소를 오른쪽/왼쪽에 배치할지를 결정
		</p>
		<p>
			주로 img 태그에 사용하지만 레이아웃 배치에도 유용하게 활용할 수 있음
			단,float속성을 해제할 때는 clear 속성을 사용
			clear속성에는 3가지가 있음 
			clear :left, right, both
		</p>

		<div>
			<img src="images/1.jpg" style="float: left"/>
			<p style="float: left; width: 1000px">
				연장전 종료 시점이 다가오던 118분, 체력적으로 힘든 순간에 기성용의 집중력이 탁월했다. 반면 첼시 선수들은 육체적 피로가 높아 기성용의 돌진을 부주의하게 바라보기만 했다. 먼저 파비오 보리니가 문전에서 공을 키핑한 뒤 기성용에게 볼을 내줬다.

				이 상황에 센터백 다비드 루이스난 문전 우측의 조지 알티도어와 보리니를 막기 위해 포지셔닝을 할 수 밖에 없었다. 애슐리 콜이 루이즈를 도왔다. 측면에 자케리니까지 전진한 상황이었다.

				기성용을 막아야 하는 쪽은 라이트백 포지션에 교체 투입된 마이클 에시엔과 센터백 게리 케이힐이었다. 지난시즌 레알마드리드 임대에서 돌아온 에시엔은 올 시즌 출전 경기 마다 불안정한 모습을 보여왔다. 이날도 기성용의 드리블 돌파를 너무 쉽게 허용했다. 설상가상으로 케이힐은 기성용이 침투한 공간을 커버하지 못했다. 슈팅 코스를 쉽게 노출했다.
			</p>

		</div>

		<div style="clear: both">
			<img src="images/31.gif" />
			<p style=" width: 400px;  border: 1px dotted red; display: inline-block">
				연장전 종료 시점이 다가오던 118분, 체력적으로 힘든 순간에 기성용의 집중력이 탁월했다. 반면 첼시 선수들은 육체적 피로가 높아 기성용의 돌진을 부주의하게 바라보기만 했다. 먼저 파비오 보리니가 문전에서 공을 키핑한 뒤 기성용에게 볼을 내줬다.

				이 상황에 센터백 다비드 루이스난 문전 우측의 조지 알티도어와 보리니를 막기 위해 포지셔닝을 할 수 밖에 없었다. 애슐리 콜이 루이즈를 도왔다. 측면에 자케리니까지 전진한 상황이었다.

				기성용을 막아야 하는 쪽은 라이트백 포지션에 교체 투입된 마이클 에시엔과 센터백 게리 케이힐이었다. 지난시즌 레알마드리드 임대에서 돌아온 에시엔은 올 시즌 출전 경기 마다 불안정한 모습을 보여왔다. 이날도 기성용의 드리블 돌파를 너무 쉽게 허용했다. 설상가상으로 케이힐은 기성용이 침투한 공간을 커버하지 못했다. 슈팅 코스를 쉽게 노출했다.
			</p>
		</div>
		<div style="clear: both">
			<img src="images/31.gif" style="float: right"/>
			<span style="float: right; width: 800px; border: 1px dotted red"> 연장전 종료 시점이 다가오던 118분, 체력적으로 힘든 순간에 기성용의 집중력이 탁월했다. 반면 첼시 선수들은 육체적 피로가 높아 기성용의 돌진을 부주의하게 바라보기만 했다. 먼저 파비오 보리니가 문전에서 공을 키핑한 뒤 기성용에게 볼을 내줬다.

				이 상황에 센터백 다비드 루이스난 문전 우측의 조지 알티도어와 보리니를 막기 위해 포지셔닝을 할 수 밖에 없었다. 애슐리 콜이 루이즈를 도왔다. 측면에 자케리니까지 전진한 상황이었다.

				기성용을 막아야 하는 쪽은 라이트백 포지션에 교체 투입된 마이클 에시엔과 센터백 게리 케이힐이었다. 지난시즌 레알마드리드 임대에서 돌아온 에시엔은 올 시즌 출전 경기 마다 불안정한 모습을 보여왔다. 이날도 기성용의 드리블 돌파를 너무 쉽게 허용했다. 설상가상으로 케이힐은 기성용이 침투한 공간을 커버하지 못했다. 슈팅 코스를 쉽게 노출했다. </span>

		</div>
		
			<div>
			<img src="images/1.jpg" style="float: left"/>
			<p style="float: left; width: 1000px; border: 1px solid navy">
				연장전 종료 시점이 다가오던 118분, 체력적으로 힘든 순간에 기성용의 집중력이 탁월했다. 반면 첼시 선수들은 육체적 피로가 높아 기성용의 돌진을 부주의하게 바라보기만 했다. 먼저 파비오 보리니가 문전에서 공을 키핑한 뒤 기성용에게 볼을 내줬다.

				이 상황에 센터백 다비드 루이스난 문전 우측의 조지 알티도어와 보리니를 막기 위해 포지셔닝을 할 수 밖에 없었다. 애슐리 콜이 루이즈를 도왔다. 측면에 자케리니까지 전진한 상황이었다.

				기성용을 막아야 하는 쪽은 라이트백 포지션에 교체 투입된 마이클 에시엔과 센터백 게리 케이힐이었다. 지난시즌 레알마드리드 임대에서 돌아온 에시엔은 올 시즌 출전 경기 마다 불안정한 모습을 보여왔다. 이날도 기성용의 드리블 돌파를 너무 쉽게 허용했다. 설상가상으로 케이힐은 기성용이 침투한 공간을 커버하지 못했다. 슈팅 코스를 쉽게 노출했다.
			</p>

		</div>

	</body>
</html>
